<template>
  <div class="tip" v-for="item in tips" :key="item.index">
    <div class="left">{{ item.index }}</div>
    <div class="right">
      <h3>{{ item.title }}</h3>
      <p
        :style="
          item.index === 2
            ? {
                marginBottom: '42px',
              }
            : {}
        "
      >
        {{ item.des }}
      </p>
      <a>{{ item.actionText }}</a>
    </div>
  </div>
  <div class="des">
    说明：
    <br />
    1. 登录名为手机号，默认密码为手机号后6位<br />
    2.操作完成之前，请不要关闭本界面
  </div>

  <div class="actions">
    <a-button type="primary" @click="onNext">下一步</a-button>
  </div>
</template>

<script lang="ts" setup>
const emit = defineEmits(['next']);
const tips = [
  {
    index: 1,
    title: '填写导入学员的信息',
    des: '请按照数据模板的格式准备导入数据，模板中的表头名称不可更改，表头行不能删除',
    action: '',
    actionText: '下载模板',
  },
  {
    index: 2,
    title: '上传填好的学员信息表',
    des: '文件后缀名必须为xls 或xlsx （即Excel格式），文件大小不得大于10M',
    action: '',
    actionText: '上传文件',
  },
];
function onNext() {
  emit('next', 2);
}
</script>
<style lang="scss" scoped>
.tip {
  width: 100%;
  height: 154px;
  box-sizing: border-box;
  border: 1px solid #eeeeee;
  display: flex;
  margin-bottom: 20px;
  .left {
    width: 74px;
    height: 154px;
    background: #eeeeee;
    overflow: hidden;
    line-height: 154px;
    text-align: center;
    font-size: 39px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #cccccc;
  }
  .right {
    box-sizing: border-box;
    padding: 20px 26px 20px 19px;
    flex: 1;
    h3 {
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 22px;
      margin: 0;
      margin-bottom: 8px;
    }
    p {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 22px;
      margin-bottom: 20px;
    }
    a {
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1890ff;
      line-height: 20px;
    }
  }
}
.des {
  height: 60px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 20px;
  margin-bottom: 44px;
}
.actions {
  text-align: center;
  margin-bottom: 80px;
}
</style>
